<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二维码生成工具</title>
  <link rel="stylesheet" href="style.css">
  <!-- 网站图标 -->
  <link rel="icon" href="https://qinglanhome.oss-rg-china-mainland.aliyuncs.com/home/logo.svg">
  <script src="./qrcode.min.js"></script>

</head>

<body>
  <!-- 海洋背景Canvas -->
  <canvas id="ocean-bg"></canvas>

  <div class="container">
    <h1><strong>青蓝逐码</strong>二维码生成器</h1>

    <div class="input-section">
      <input type="text" id="qr-text" placeholder="请输入网址或文本内容...">
      <button id="generate-btn">生成二维码</button>
    </div>

    <div class="customization-section">
      <h2>主题设置</h2>

      <div class="option-group">
        <label for="qr-title">标题文字：</label>
        <input type="text" id="qr-title" placeholder="二维码标题（可选）">
      </div>

      <div class="option-group">
        <label for="foreground-color">前景色：</label>
        <input type="color" id="foreground-color" value="#000000">
      </div>

      <div class="option-group">
        <label for="background-color">背景色：</label>
        <input type="color" id="background-color" value="#ffffff">
      </div>

      <div class="option-group">
        <label for="dot-style">点的样式：</label>
        <select id="dot-style">
          <option value="square">方形</option>
          <option value="rounded">圆角方形</option>
          <option value="dots">圆形</option>
          <option value="classy">优雅</option>
          <option value="classy-rounded">优雅圆角</option>
        </select>
      </div>

      <div class="option-group">
        <label for="logo-select">添加Logo：</label>
        <select id="logo-select">
          <option value="none">无</option>
          <option value="flower">梅花</option>
          <option value="star">星形</option>
          <option value="heart">爱心</option>
          <option value="custom">自定义上传</option>
        </select>
      </div>

      <div id="logo-upload-container" class="option-group" style="display: none;">
        <label for="custom-logo-upload">上传Logo：</label>
        <div class="file-upload-wrapper">
          <input type="file" id="custom-logo-upload" accept="image/*">
          <button id="file-upload-btn">选择图片</button>
          <span id="file-name">未选择文件</span>
        </div>
      </div>

      <div class="themes">
        <h3>预设主题</h3>
        <div class="theme-buttons">
          <button class="theme-btn" data-theme="classic">经典黑白</button>
          <button class="theme-btn" data-theme="blue">蓝色海洋</button>
          <button class="theme-btn" data-theme="flower">梅花主题</button>
          <button class="theme-btn" data-theme="elegant">优雅金色</button>
          <button class="theme-btn" data-theme="neon">霓虹灯</button>
          <button class="theme-btn" data-theme="cyberpunk">赛博朋克</button>
          <button class="theme-btn" data-theme="galaxy">星空银河</button>
          <button class="theme-btn" data-theme="gradient">梦幻渐变</button>
        </div>
      </div>
    </div>

    <div class="result-section">
      <div class="qr-wrapper">
        <h3 id="qr-display-title"></h3>
        <div id="qrcode"></div>
      </div>
      <button id="download-btn" disabled>下载二维码</button>
    </div>
  </div>

  <!-- 海洋背景脚本 -->
  <script src="ocean-bg.js"></script>
  <script src="script.js"></script>
</body>

</html>